<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/common :: common_head('科目四随机练习')"></head>
<head>
  <link rel="stylesheet" th:href="@{/css/front/common-sequence.css}">
</head>
<body>
<!-- 引入公共的导航部分 -->
<header th:include="common/common :: common_header('','科目四随机练习')"></header>
<!-- 内容的主体部分 -->
<article id="change-content">
  <div class="layui-container">
    <div class="layui-row">
      <div class="layui-col-md10 layui-col-md-offset1">
        <!-- 题目和选项信息 -->
        <div class="layui-card">
          <div class="layui-card-header">
            <span style="font-weight: bolder">{{questionType == 1 ? '单项选择' : (questionType == 2 ? '判断题' : '多项选择')}}</span>
            <span>第 {{current + 1}} 题 / 共 {{total}} 题</span>
            <span>问题：{{questionTopic}}</span>
          </div>
          <!-- 选项部分的内容 -->
          <div class="layui-card-body title-information">
            <div class="question-wrap">
              <div class="option-wrap" style="font-size: 14px;">
                <div class="input-radio" v-if="questionA"><input name="answer" v-model="answer" :type="type" value="A">&nbsp;&nbsp;<span>{{questionA}}</span></div>
                <div class="input-radio" v-if="questionB"><input name="answer" v-model="answer" :type="type" value="B">&nbsp;&nbsp;<span>{{questionB}}</span></div>
                <div class="input-radio" v-if="questionC"><input name="answer" v-model="answer" :type="type" value="C">&nbsp;&nbsp;<span>{{questionC}}</span></div>
                <div class="input-radio" v-if="questionD"><input name="answer" v-model="answer" :type="type" value="D">&nbsp;&nbsp;<span>{{questionD}}</span></div>
                <div class="input-radio" v-if="questionE"><input name="answer" v-model="answer" :type="type" value="E">&nbsp;&nbsp;<span>{{questionE}}</span></div>
                <div class="input-radio" v-if="questionF"><input name="answer" v-model="answer" :type="type" value="F">&nbsp;&nbsp;<span>{{questionF}}</span></div>
                <div class="input-radio" v-if="questionG"><input name="answer" v-model="answer" :type="type" value="G">&nbsp;&nbsp;<span>{{questionG}}</span></div>
              </div>
              <br><br>
              <div class="option-button">
                <button type="button" @click="getNextQuestion(pre)" class="layui-btn">上一题</button>
                <button type="button" @click="getNextQuestion(next)" class="layui-btn">下一题</button>
                <button type="button" @click="checkAnswer(answer,current)" v-if="questionType === 3" class="layui-btn">提交答案</button>
                <button type="button" class="layui-btn" @click="seeQuestionAnswer">查看本题答案</button>
                <button type="button" class="layui-btn" @click="seeComment">查看评论</button>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="question-image"><img :src="questionImage" alt=""></div>
              <div class="question-image-button" v-if="questionImage"><button type="button" class="layui-btn layui-btn-primary" @click="seeBigImage">点击查看大图</button></div>
            </div>
          </div>
        </div>
      </div>

      <div class="layui-col-md10 layui-col-md-offset1">
        <!-- 回答结果的提示信息 -->
        <div class="layui-card">
          <div class="layui-card-body result-information">
            <hr>
            <div class="layui-btn-container result-button">
              <button type="button" class="layui-btn layui-btn-primary result-button-item" @click="getNextQuestion(index)" v-for="(id,index) in questionIds">{{index+1}}</button>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md10 layui-col-md-offset1"   >

        <div class="layui-card" >
          <div class="layui-card-body result-information">
            <hr>
            <table class="layui-hide" id="discuss-table" lay-filter="discuss-table"></table>
          </div>
        </div>

      </div>
      <div class="layui-col-md10 layui-col-md-offset1">

        <div class="layui-card">
          <div class="layui-card-body result-information">
            <hr>
            <form class="layui-form" action="">
              <div class="layui-form-item layui-form-text ">
                <label class="layui-form-label">评论</label>
                <div class="layui-input-block">
                  <textarea type="textarea" name="comment" placeholder="请发表您对本题的看法" autocomplete="off" class="layui-textarea"></textarea>
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn "  lay-submit lay-filter="commit">发表评论</button>
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
              </div>

            </form>
          </div>
        </div>

      </div>
    </div>
  </div>
  </div>
</article>
<hr>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>
<!-- 公共的底部部分 -->
<div th:replace="~{/common/common :: footer-common}"></div>
</body>
</html>
<script>
  const app = new Vue({
    el: '#change-content',
    data: {
      total: 0, //总问题数目
      current: 0, //当前问题的数标，默认是第一题
      next: 'next',
      pre: 'pre',
      type: 'radio', //默认单选框
      questionTopic: '',//当前问题的题目
      questionId: '',//当前题目的ID
      questionA: '',//存储选项A的内容
      questionB: '',//存储选项B的内容
      questionC: '',//存储选项C的内容
      questionD: '',//存储选项D的内容
      questionE: '',//存储选项E的内容
      questionF: '',//存储选项F的内容
      questionG: '',//存储选项G的内容
      questionExplain: '',//当前问题的解释
      questionType: '',//当前问题的类型
      answer: [],//用户选择的答案
      questionAnswer: '',//题目的正确答案
      questionImage: '',//题目的照片
      questionIds:[], //用来存储题目的ID
    },
    methods: {
      //查看问题的大图片
      seeBigImage: function (){
        layui.use('layer', function(){
          const layer = layui.layer;
          layer.open({
            type: 1,
            area: '1000px',
            moveOut: true,
            shadeClose: true,
            content: `<img src="${app.questionImage}" width="920" style="margin: 40px">`,
          });
        });
      },
      seeComment: function (){
        layui.use(['element', 'table'], function () {

          let table = layui.table;
          console.log(table);
          let form = layui.form;
          let $ = layui.$;
          let layer = layui.layer;
          table.render({
            elem: '#discuss-table'
            , url: '/discuss/seeComment'
            , title: '评论'
            , cols: [
              [
                {title: '序号', type: "numbers", unresize: false, width: 80}
                , {field: 'name', title: '评论人', width: 135}
                , {field: 'comment', title: '评论',width: 545}
                , {field: 'created', title: '日期',}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
              ]
            ]
            , id: 'discussTable'
            , limits: [2, 4, 6, 8, 10]
            , page: true
          });
          //监听行工具事件
          table.on('tool(discuss-table)', function (obj) {
            let data = obj.data;

            //删除指定行数据
            if (obj.event == 'delete') {
              console.log(obj)
              $.ajax({
                url: '/discuss/deleteDiscuss',
                data: {
                  id:data.id,
                  name:data.name
                },
                dataType: 'JSON',
                success: function (res) {
                  if (res == 1) {
                    layer.msg("删除成功");
                  }
                  if (res == 0) {
                    layer.msg("只能删除本人评论的内容");
                  } if (res == 2) {
                    layer.open({
                      type: 0,
                      area: '300px',
                      moveOut: false,
                      closeBtn: false,
                      shade: 0.8,
                      btn: ['去登陆页面', '留在当前页面'],
                      btnAlign: 'c',
                      content: `<div style="width: 100%;text-align: center">
                                        <h2>您当前未登录！</h2>
                                      </div>`,
                      yes: function (){
                        window.location.href = "/page/learnerLogin";
                      }
                    })
                  }
                  //执行重载
                  table.reload('discussTable', {
                    page: {
                      curr: $(".layui-laypage-skip .layui-input").val() //重新当前页重载;
                    }
                  });
                }
              }, JSON)
            }
          });

        });
      },

      //查看本题的答案
      seeQuestionAnswer: function (){
        layui.use('layer',function (){
          const layer = layui.layer;
          layer.open({
            type: 1,
            area: ['500px', '300px'],
            title: false,
            closeBtn: false,
            shadeClose: true,
            content: `<div class="layui-card">
                                      <div class="layui-card-header">本题问题解析：</div>
                                      <div class="layui-card-body">
                                        ${app.questionExplain}
                                      </div>
                                  </div>`,
          })
        })
      },
      //获取下一个问题
      getNextQuestion: function (index){

        let _this = this;

        if (_this.current === 0 && index === 'pre'){
          alert("已经是第一题了");
          return;
        }

        if (_this.current === _this.total - 1 && index === 'next'){
          alert("已经是最后一题");
          return;
        }

        if (isNaN(index) && index === 'pre'){
          _this.current--;
        }

        if (isNaN(index) && index === 'next'){
          _this.current++;
        }

        if (!isNaN(index)){
          _this.current = index;
        }

        //清除input的选中状态
        let radios = document.getElementsByName("answer");
        for (let i =0;i<radios.length;i++){
          radios[i].checked=false;
        }

        //后台发送请求获取题目信息
        _this.$http.get('/question/getNextQuestionById/'+_this.current).then(function (question){
          let question_json = JSON.parse(question.body);
          _this.questionId = question_json.questionId;
          _this.questionTopic = question_json.questionTopic;
          _this.questionA = question_json.questionA;
          _this.questionB = question_json.questionB;
          _this.questionC = question_json.questionC;
          _this.questionD = question_json.questionD;
          _this.questionE = question_json.questionE;
          _this.questionF = question_json.questionF;
          _this.questionG = question_json.questionG;
          _this.questionAnswer = question_json.questionAnswer;
          _this.questionExplain = question_json.questionExplain;
          _this.questionType = question_json.questionType;
          _this.questionImage = question_json.questionImage;
          if (_this.questionType === 3){
            _this.type = 'checkbox';
          }else{
            _this.type = 'radio';
          }
        },function (){
          alert("请求失败");
        });
      },

      //获取全部问题的ID
      getQuestionId: function (){
        let _this = this;
        _this.$http.get('/question/getAllQuestionIdsByRandom/4').then(function (data){
          let list = JSON.parse(data.body);
          for (let i = 0; i < list.length; i++){
            _this.questionIds[i] = list[i];
          }
          _this.total = list.length;
          _this.getNextQuestion(_this.current);
        })
      },
      //校验用户选中的答案
      checkAnswer: function (answer,current){
        let _this = this;
        let button_array = document.getElementsByClassName("result-button-item");
        let index = current;
        //判断是否是多选，如果是多选，将数组转换成字符串
        if (_this.type === 'checkbox' && _this.answer.length > 0){
          answer =_this.answer.join("");
        }
        if(_this.questionAnswer === answer){
          button_array[index].style.backgroundColor = 'green';
          //分数加一
          _this.score++;
        }else {
          button_array[index].style.backgroundColor = 'red';
          _this.questionError(_this.questionId);
        }
        button_array[index].style.color = 'white';
        _this.answer = [];
      },
      //回答错误
      questionError: function (questionId){
        this.$http.get('/question/questionError',{params:{questionId:questionId}}).then(function (data){});
      }
    },
    mounted: function () {
      this.getQuestionId();
    },
    //监听用户是否选择了答案
    watch: {
      answer(){
        let _this = this;
        if (_this.type === 'radio' && _this.answer != ''){
          _this.checkAnswer(_this.answer,_this.current);
        }
      }
    }
  });
  layui.use('form', function(){
    let form = layui.form;
    let layer = layui.layer;
    let $ = layui.$;

    //监听提交
    form.on('submit(commit)', function(data){
      console.log(data);
      $.ajax({
        url: '/discuss/comment',
        method: 'post',
        data: {
          comment:data.field.comment,
        },
        dataType: 'JSON',
        success: function (res){
          if (res == 1){
            layer.msg('评论成功！');
          }
          if (res == 2){
            layer.open({
              type: 0,
              area: '300px',
              moveOut: false,
              closeBtn: false,
              shade: 0.8,
              btn: ['去登陆页面', '留在当前页面'],
              btnAlign: 'c',
              content: `<div style="width: 100%;text-align: center">
                                        <h2>您当前未登录！</h2>
                                      </div>`,
              yes: function (){
                window.location.href = "/page/learnerLogin";
              }
            })
          }
          if (res == 0){
            layer.msg('评论失败！');
          }
        }
      },JSON);

      return false;

    });
  });
</script>

